<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-1">第1列</div>
			<div class="col-xl-1">第2列</div>
			<div class="col-xl-1">第3列</div>
			<div class="col-xl-1">第4列</div>
			<div class="col-xl-1">第5列</div>
			<div class="col-xl-1">第6列</div>
			<div class="col-xl-1">第7列</div>
			<div class="col-xl-1">第8列</div>
			<div class="col-xl-1">第9列</div>
			<div class="col-xl-1">第10列</div>
			<div class="col-xl-1">第11列</div>
			<div class="col-xl-1">第12列</div>
		</div>
		<div class="row">
			<div class="col-xl-2">占2列</div>
			<div class="col-xl-7">占7列</div>
			<div class="col-xl-1">占1列</div>
			<div class="col-xl-2">占2列</div>
		</div>
		<div class="row">
			<div class="col-xl-10">占10列</div>
			<div class="col-xl-2">占2列</div>
		</div>
		<div class="row">
			<div class="col-xl-12">占12列</div>
		</div>
		<div class="row">
			<div class="col-xl-6">占6列</div>
			<div class="col-xl-8">占8列</div>
		</div>
		<div class="row">
			<div class="col-xl-15">占15列</div>
		</div>
	</div>
</body>

</html>
